<script setup >
import {ref} from 'vue';
import {useRouter} from "vue-router";

// 选择原始数据列表
const originTagList = [
  {
    text: '性别',
    children: [
      {text: '男', id: '男'},
      {text: '女', id: '女'},
      {text: '未知', id: '未知'},

    ],
  },
  {
    text: '年级',
    children: [
      {text: '大一', id: '大一'},
      {text: '大二', id: '大二'},
      {text: '大三', id: '大三'},
      {text: '大四', id: '大四'},
      {text: '小学', id: '小学'},
      {text: '初中', id: '初中'},
      {text: '高中', id: '高中'},

    ],
  }
];


// 搜索栏函数
// 搜索栏内容ref
const searchText = ref('');


//标签列表
const tagList = ref(originTagList);

// 搜索
const onSearch = (val) => {
  // map 方法创建一个新数组，其结果是该数组中的每个元素都调用了提供的函数后返回的结果。
  tagList.value = originTagList.map(parentTag => {
    // 创建子标签数组的副本
    const tempChildren = [...parentTag.children];
    // // 控制台输出tempChildren
    // console.log(tempChildren);
    // 创建父标签对象的副本,获取父标签大类结构
    const tempParentTag = {...parentTag};
    // 筛选出文本包含搜索关键字的子标签
    tempParentTag.children = tempChildren.filter(item =>
        // includes() 方法用于判断一个字符串是否包含在另一个字符串中。
        item.text.includes(searchText.value)
    );
    // 返回处理后的父标签对象
    return tempParentTag;
  });
};
// 清空
const onCancel = () => {
  searchText.value = '';
  tagList.value = originTagList;
}


// 可关闭标签函数
// 关闭标签
const close = (tag) => {
  // 当用户点击标签的关闭按钮时，从activeIds数组中移除对应的标签
  // filter 方法创建一个新的数组，新数组中的元素是通过检查指定数组中元素返回 true 的元素。
  activeIds.value = activeIds.value.filter(item => item !== tag);
};


// 分类选择函数
const activeIds = ref([]);
const activeIndex = ref(0);



// 搜索按钮函数
const router = useRouter();
const doSearchResult = () =>{
  router.push({
    path: '/user/list',
    query:{
      // 获取选中标签的名称,传递
      tags: activeIds.value
    }
  })
}

</script>

<template>
  <form action="/">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>

  <!--  分割线-->
  <van-divider content-position="center">已选标签</van-divider>
  <div v-if="activeIds.length === 0">请选择标签</div>
  <!--  可关闭标签-->
  <!--  显示标签美化-->
  <van-row gutter="16" style="padding: 0 16px">
    <van-col v-for="tag in activeIds">
      <!--  选择与标签关联-->
      <van-tag closeable size="medium" type="primary" @close="close(tag)">
        {{ tag }}
      </van-tag>
    </van-col>

  </van-row>


  <!--  分割线-->
  <van-divider content-position="center">选择标签</van-divider>
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />

<!--  搜索按钮-->
  <div style="padding: 16px">
    <van-button block type="primary" @click="doSearchResult">搜索</van-button>
  </div>

</template>

<style scoped>

</style>